<template>
	<view class="bg-white">
		<view class="u-p-28">
			<view class="u-font-16 color-3 u-m-b-28">
				失信人信息
			</view>

			<u-form :model="form" :label-style="labelStyle" :border-bottom="false" label-position="top" ref="uForm">

				<view class="border-title u-p-t-16 u-p-b-16">
					失信人身份 <text class="red">*</text>
				</view>
				<radio-button v-model="form.identity" :list='identityList' width="60%"></radio-button>


				<u-form-item :border-bottom="false" label="失信人姓名">
					<u-input :clearable="false" :custom-style="inputStyle" v-model="form.name" placeholder="请输入" />
				</u-form-item>

				<u-form-item :border-bottom="false" label="失信人性别">
					<radio-button v-model="form.sex" :list='sexList' width="60%"></radio-button>
				</u-form-item>


				<u-form-item :border-bottom="false" label="身份证号">
					<u-input :clearable="false" :custom-style="inputStyle" v-model="form.id_number" placeholder="请输入" />
				</u-form-item>

				<u-form-item :border-bottom="false" label="手机号">
					<u-input :clearable="false" :custom-style="inputStyle" v-model="form.mobile" placeholder="请输入" />
				</u-form-item>

				<view class="border-title u-p-t-16 u-p-b-16">
					微信号 <text class="red">*</text>
				</view>
				<u-input :clearable="false" :custom-style="inputStyle" v-model="form.wechat" placeholder="请输入" />


				<view class="border-title u-p-t-16 u-p-b-16">
					微信昵称 <text class="red">*</text>
				</view>
				<u-input :clearable="false" :custom-style="inputStyle" v-model="form.nickname" placeholder="请输入" />

				<view class="border-title u-p-t-16 u-p-b-16">
					举报理由 <text class="red">*</text>
				</view>
				<u-input height="220" :clearable="false" :custom-style="textareaStyle" type="textarea" v-model="form.reason"
					placeholder="请输入举报理由" />


				<view class="border-title u-p-t-16 u-p-b-16">
					举报证据(最多9张) <text class="red">*</text>
				</view>
				<upload dir="blacklist" :max="9" v-model="form.images"></upload>

				<view class="color-3 u-font-10 u-p-32">
					注：请上传宠物照片、聊天记录、转账记录等确切证据
				</view>

				<view class="submit">
					<view class="btn" @click="submit">提交举报</view>
				</view>


			</u-form>
		</view>


	</view>
</template>

<script>
	import radioButton from '@/components/radioButton/radioButton.vue';
	import {
		balckListTab,
		sexList
	} from '@/const';
	import {
		saveBlackList,
		getBlacklistsUserInfo
	} from '@/api/index';
	import {
		getTemplateIds
	} from '@/api/common';
	export default {
		components: {
			radioButton
		},
		data() {
			return {
				labelStyle: {
					borderLeft: '3px solid  #FFCF0B',
					paddingLeft: '5px',
					color: '#333',
					fontSize: '16px',
					height: '16px',
					marginBottom: '10rpx'
				},
				inputStyle: {
					height: '40px',
					background: '#F6F7FB',
					borderRadius: '4px',
					padding: '0 10px',
				},
				textareaStyle: {
					height: '40px',
					background: '#F6F7FB',
					borderRadius: '4px',
					padding: '10px',
				},
				form: {
					source: 2, // 1举报发布2 直接发布 url里面没有就是2
					identity: 1,
					name: '',
					sex: 1,
				},
				identityList: balckListTab.map(item => {
					item.name = item.nameStr;
					return item;
				}),
				sexList: [sexList[0], sexList[1]],
			};
		},
		onLoad(options) {
			if (options.source) {
				// 来自领养详情-举报
				this.form.source = options.source;
				this.form.sxr_id = options.sxr_id;
				this.form.oid = options.oid;
				this.getBlacklistsUserInfo();
			}
		},
		methods: {
			async getBlacklistsUserInfo() {
				const res = await getBlacklistsUserInfo({
					id: this.form.sxr_id
				});
				this.form = {
					...this.form,
					...res.data
				}
			},
			async submit() {
				const postData = Object.assign({}, this.form);
				if (postData.images) {
					postData.images = postData.images.map(item => item.attachment);
				}

				await saveBlackList(postData);
				uni.showModal({
					showCancel: false,
					content: '您发布的举报信息已经提交审核， 工作人员会在12小时内进行审核， 审核通过后将在页面上进行展示。',
					confirmColor: '#333',
					success: (res) => {
						if (res.confirm) {
							this.requestSubscribeMessage();
						}
					}
				});
			},
			async requestSubscribeMessage() {
				const respone = await getTemplateIds();
				const tmplIds = respone.data.black_template[0];
				const _this = this;
				wx.getSetting({
					withSubscriptions: true, //  这里设置为true,下面才会返回mainSwitch
					success: function(res) {
						console.log('res', res);
						// 调起授权界面弹窗
						if (res.subscriptionsSetting.mainSwitch) { // 用户打开了订阅消息总开关
							if (res.subscriptionsSetting.itemSettings !=
								null) { // 用户同意总是保持是否推送消息的选择, 这里表示以后不会再拉起推送消息的授权
								let moIdState = res.subscriptionsSetting.itemSettings[
									tmplIds]; // 用户同意的消息模板id
								if (moIdState === 'accept') {
									console.log('接受了消息推送');
			
								} else if (moIdState === 'reject') {
									console.log("拒绝消息推送");
			
								} else if (moIdState === 'ban') {
									console.log("已被后台封禁");
			
								}
							} else {
								// 当用户没有点击 ’总是保持以上选择，不再询问‘  按钮。那每次执到这都会拉起授权弹窗
								wx.showModal({
									title: '提示',
									content: '请授权开通服务通知',
									showCancel: true,
									success: function(ress) {
										if (ress.confirm) {
											wx.requestSubscribeMessage({ // 调起消息订阅界面
												tmplIds: [tmplIds],
												success(res) {
													console.log('订阅消息 成功 ');
													console.log(res);
													uni.navigateBack();
												},
												fail(er) {
													console.log("订阅消息 失败 ");
													console.log(er);
													uni.navigateBack();
												}
											})
			
										} else if (ress.cancel) {
											uni.navigateBack();
										}
									}
								})
							}
			
						} else {
							console.log('订阅消息未开启')
						}
					},
					fail: function(error) {
						console.log(error);
					},
				})
			
			}

		}
	}
</script>

<style lang="scss" scoped>
	.submit {
		padding: 32rpx;

		.btn {
			height: 44px;
			line-height: 44px;
			color: #333333;
			font-size: 16px;
			background: #FFCF0B;
			border-radius: 22px;
			text-align: center;
		}
	}
</style>
